<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>下单</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="lib/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        .item-list tbody {
            display: block;
            height: 330px;
            overflow-y: scroll;
        }

        .item-list thead,
        .item-list tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed; /*表格固定算法*/
        }

        .item-list thead {
            width: calc(100% - 1em); /*流出滚动条的位置*/
        }

        @media (min-width: 576px) {
            .modal-dialog {
                max-width: 580px;
            }
        }

        .form-check-inline {
            margin-right: 0;
        }
    </style>
</head>
<body>

<div class="container-fluid">

    <div class="app-title">
        <div>
            <h1><i class="fa fa-circle-o"></i> 下单</h1>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><a href="welcome.html">首页</a></li>
            <li class="breadcrumb-item"><a href="order_list.html">订单管理</a></li>
            <li class="breadcrumb-item active">下单</li>
        </ul>
    </div>

    <div class="tile">
        <div class="row" id="app">
            <div class="col-md-6">
                <div class="form-inline">
                    <div class="form-group mx-1 mb-2">
                        <input class="form-control" size="16" placeholder="菜品名称">
                    </div>
                    <div class="form-group mx-1 mb-2">
                        <select class="form-control" required>
                            <option value="">-菜品分类-</option>
                            <option value="火锅">火锅</option>
                            <option value="凉菜">凉菜</option>
                            <option value="小炒">小炒</option>
                            <option value="田园时蔬">田园时蔬</option>
                            <option value="酒水">酒水</option>
                        </select>
                    </div>
                    <button type="button" class="btn btn-outline-primary mb-2">
                        <i class="fa fa-search"></i>搜索
                    </button>
                </div>
                <!--表格-->
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                        <tr class="bg-light">
                            <th>菜品</th>
                            <th>图片</th>
                            <th>单价</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="dishes in dishesList">
                            <td>{{dishes.name}}</td>
                            <td><img :src="dishes.image" alt height="32"></td>
                            <td>{{dishes.price}} RMB</td>
                            <td>
                                <button type="button" class="btn btn-light btn-sm" @click="doAdd(dishes)">
                                    <i class="fa fa-plus-circle"></i>添加
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <!--分页-->
                <ul class="pagination">
                    <li class="page-item disabled"><a class="page-link">«</a></li>
                    <li class="page-item active"><a class="page-link">1</a></li>
                    <li class="page-item"><a class="page-link">»</a></li>
                </ul>
            </div>

            <div class="col-md-6">
                <div class="form-inline">
                    <div class="form-group mx-1 mb-2">
                        <select class="form-control">
                            <option value="">-选择门店-</option>
                        </select>
                    </div>
                    <div class="form-group mx-1 mb-2">
                        <select class="form-control">
                            <option value="">-订单类型-</option>
                            <option value="堂食">堂食</option>
                            <option value="外卖">外卖</option>
                            <option value="打包">打包</option>
                        </select>
                    </div>
                    <div class="form-group mx-1 mb-2">
                        <input class="form-control" size="8" placeholder="用餐人数">
                    </div>
                    <!-- <button class="btn btn-outline-primary mx-1 mb-2">取单</button> -->
                    <button class="btn btn-outline-danger mx-1 mb-2" @click="doCheckout()">结账</button>
                </div>
                <!--表格-->
                <div class="table-responsive">
                    <table class="table item-list">
                        <thead>
                        <tr class="bg-light">
                            <th>序号</th>
                            <th>菜品</th>
                            <th>数量</th>
                            <th>金额</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in itemList">
                            <td>{{item.id}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.num}}</td>
                            <td>￥{{item.price}}</td>
                            <td>
                                <a class="text-danger" href="javascript:void(0)" @click="doRemove(item)">
                                    <i class="fa fa-lg fa-trash-o"></i>
                                </a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <!-- /.table-responsive -->
                <div class="text-right mt-3">
                    总计: <b>{{total}} RMB</b>
                </div>
            </div>
        </div>
    </div>
    <!-- /.tile -->
</div>
<!-- /.container-fluid -->

<!-- model-checkout -->
<div class="modal" id="modal-checkout">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">账单结算</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">消费金额:</label>
                        <div class="col-sm-10">
                            <strong class="form-control-plaintext text-danger">{{xiaoFeiJinE}} RMB</strong>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">优惠金额:</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" min="0" placeholder="0.0" v-model="youHuiJinE">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">应收金额:</label>
                        <div class="col-sm-10">
                            <strong class="form-control-plaintext text-danger">{{yingShouJinE}} RMB</strong>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">结账方式:</label>
                        <div class="col-sm-10">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" id="xj" type="radio" name="ways" value="现金" checked>
                                <label class="form-check-label" for="xj">现金</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" id="yl" type="radio" name="ways" value="银联">
                                <label class="form-check-label" for="yl">银联</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" id="djq" type="radio" name="ways" value="代金券">
                                <label class="form-check-label" for="djq">代金券</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" id="wx" type="radio" name="ways" value="微信">
                                <label class="form-check-label" for="wx">微信</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" id="zfb" type="radio" name="ways" value="支付宝">
                                <label class="form-check-label" for="zfb">支付宝</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">实收金额:</label>
                        <div class="col-sm-5">
                            <input type="number" class="form-control" :placeholder="yingShouJinE" v-model="shiShouJinE">
                        </div>
                        <div class="col-sm-5">
                            <label class="col-form-label">找零:</label>
                            <strong class="text-danger">{{zhaoLing}} RMB</strong>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">备注信息:</label>
                        <div class="col-sm-10">
                            <input class="form-control">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">短信提醒:</label>
                        <div class="col-sm-10">
                            <input class="form-control">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" @click="doConfirm()">确认</button>
            </div>
        </div>
    </div>
</div>

<!-- Essential javascripts for application to work-->
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<!-- Page specific javascripts-->
<script src="js/plugins/jquery.validate.min.js"></script>
<script src="lib/layer/layer.js"></script>
<script src="lib/vue/vue.min.js"></script>
<script>
    // 表单验证
    // $("#form").validate();

    let app = new Vue({
        el: "#app",
        data: {
            dishesList: [{
                id: 1,
                name: "黄焖鸡",
                image: "images/dishes01.jpg",
                price: 13
            }, {
                id: 2,
                name: "土豆焖鸡",
                image: "images/dishes02.jpg",
                price: 15
            }, {
                id: 3,
                name: "青椒炒肉",
                image: "images/dishes03.jpg",
                price: 18
            }],
            itemList: [{
                id: 1,
                name: "黄焖鸡",
                num: 1,
                price: 13
            }]
        },
        computed: {
            // 计算总价
            total() {
                let total = 0;
                for (let i = 0; i < this.itemList.length; i++) {
                    let item = this.itemList[i];
                    total += item.price * item.num;
                }
                return total;
            }
        },
        methods: {
            // 添加
            doAdd(dishes) {
                let item = {
                    id: this.itemList.length + 1,
                    name: dishes.name,
                    num: 1,
                    price: dishes.price
                };
                this.itemList.push(item);
            },
            // 删除
            doRemove(item) {
                let index = this.itemList.indexOf(item);
                this.itemList.splice(index, 1);
            },
            // 结账
            doCheckout() {
                checkoutApp.xiaoFeiJinE = this.total;
                $("#modal-checkout").modal("show");
            }
        }
    });

    let checkoutApp = new Vue({
        el: "#modal-checkout",
        data: {
            xiaoFeiJinE: "0.0",
            youHuiJinE: "0.0",
            shiShouJinE: ""
        },
        computed: {
            yingShouJinE() {
                return this.xiaoFeiJinE - this.youHuiJinE;
            },
            zhaoLing() {
                if (this.shiShouJinE >= this.yingShouJinE) {
                    return this.shiShouJinE - this.yingShouJinE;
                }
                return 0;
            }
        },
        methods: {
            doConfirm() {
                layer.alert("确认...");
            }
        }
    });

</script>

</body>
</html>